<template>
  <div class="dashboard-container">
    <el-tag>用户 ：{{ nickname }}</el-tag>
    <panel-group :info="info"/>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import PanelGroup from './components/PanelGroup'
import {getInfo} from '../../api/dashboard.js'

export default {
  name: 'Dashboard',
  data() {
    return {
      info: {
        all_port: 0,
        port: 0,
        agent_num: 0,
      }
    }
  },
  components: {
    PanelGroup
  },
  computed: {
    ...mapGetters([
      'nickname'
    ])
  },
  created() {
    this.getInfo()
  },
  methods: {
    getInfo(){
      getInfo().then(response=>{
        console.log(response)
        if(response.code === 1){
          this.info.all_port = response.data.all_port
          this.info.port = response.data.port
          this.info.agent_num = response.data.agent_num
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
}
</style>
